<template>
    <button @click="show = !show">Toggle</button>
    <div style="background-color: #fff;">
        <Transition>
            <p v-if="show">hello</p>
        </Transition>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const show = ref(false)
</script>

<style scoped>
/* 动画进入 */
/* 动画的起始状态 */
.v-enter-from {
    opacity: 0.25;
}
/* 动画的过渡状态 */
.v-enter-active {
    transition: opacity 1.5s ease;
}
/* 动画的结束状态 */
.v-enter-to {
    opacity: 1;
    color: red;
}

/* 动画离开 */
/* 动画的起始状态 */
.v-leave-from {
    opacity: 1;
    color: red;
}
/* 动画的过渡状态 */
.v-leave-active {
    transition: opacity 1.5s ease;
    color: red;
}
/* 动画的结束状态 */
.v-leave-to {
    opacity: 0.25;
    color: red;
}
</style>